<template>
	<view class="pagesbg">
		<view class="rechargeListBg"></view>
		<!-- 头部 -->
		<view class="header_bar header_fixed">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">充值</view>
				<view class="header-right" @tap.stop="$tools.jump('./rechargeRecords')">充值记录</view>
			</view> 
		</view> 
		
		<view class="">
			<view class="rechargeList">
				<view class="rechargeList-wrapper">
					<view class="rechargeList-list" @tap.stop="$tools.jump('./recharge_two',2)">
						<view class="rechargeList-list__item">
							<view class="left">
								<view class="imageBox">
									<image src="@/static/asset/alipay.png" mode=""></image>
								</view>
								<view class="titleBox">
									<view class="title">支付宝支付</view>
									<view class="tips">使用支付宝线上充值</view>
								</view>
							</view>
							<view class="right">
								<image src="@/static/asset/next.png" mode=""></image>
							</view>
						</view>
					</view>	
					<view class="rechargeList-list" @tap.stop="$tools.jump('./recharge_two',1)">
						<view class="rechargeList-list__item">
							<view class="left">
								<view class="imageBox">
									<image src="@/static/asset/wechat.png" mode=""></image>
								</view>
								<view class="titleBox">
									<view class="title">微信支付</view>
									<view class="tips">使用微信线上充值</view>
								</view>
							</view>
							<view class="right">
								<image src="@/static/asset/next.png" mode=""></image>
							</view>
						</view> 
					</view>
					<view class="rechargeList-list" @tap.stop="$tools.jump('./recharge_two',3)">
						<view class="rechargeList-list__item">
							<view class="left">
								<view class="imageBox">
									<image src="@/static/asset/bank.png" mode=""></image>
								</view>
								<view class="titleBox">
									<view class="title">银行卡充值</view>
									<view class="tips">使用银行卡线上充值</view>
								</view>
							</view>
							<view class="right">
								<image src="@/static/asset/next.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			init(){
				this.getRechargeAmount();
			},
			confirm() {
				if (this.num == '' ) {
					return this.$tools.toast('请输入充值金额');
				}
				if (this.waysActive == 0) {
					return this.$tools.toast('请选择支付方式');
				}
				this.$tools.jump("./recharge_two",this.waysActive,this.num);
				// if(this.toggle){
				// 	this.toggle = false;
				// 	var data = {};
				// 	data['type'] = this.waysActive;
				// 	data['amount'] = this.num;
				// 	console.log("data:",data);
				// 	this.$Ajax('/config/addDownRecharge',data,res => {
				// 			if (res.code == 200) {
				// 				this.$tools.toast("充值提交成功");
				// 				this.waysActive = 0;
				// 				this.num = '';
				// 				this.toggle = true;
				// 			} 
				// 		},err => {
				// 			this.toggle = true;
				// 		}
				// 	)
				// }
			},
			// 
			getRechargeAmount(){
				var data = {};
				console.log("data：",data);
				this.$Ajax('/api/money/getRechargeAmount',data,res => {
						if(res.code == 200){
							this.rechargeAmountList = res.data;
							this.num = this.rechargeAmountList[0];
						}
					}, err => {
					}, 'GET'
				)
			},
			checkWaysActive(index){
				if(this.waysActive != index){
					this.waysActive = index;
				}
			},
			checkActive(index,item){
				if(this.active != index){
					this.active = index;
					this.num = item;
				}
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rechargeListBg{
		background: url('@/static/asset/rechargeListBg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 638rpx;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}
	.rechargeList{
		position: relative;
		z-index: 2;
		padding:  0 30rpx;
		&-wrapper{
			margin: 22rpx 0;
			@include flexLeftColumn;
		}
		&-list{
			border-radius: 16rpx;
			padding: 2rpx;
			margin-bottom: 20rpx;
			width: 100%;
			&__item{
				@include flexBetween;
				padding: 38rpx 34rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.left{
					@include flexLeft;
					.imageBox{
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.titleBox{
						@include flexLeftColumn;
						.title{
							font-family: PingFang SC, PingFang SC;
							font-weight: normal;
							font-size: 32rpx;
							color: #3D3D3D;
						}
						.tips{
							font-family: PingFang SC, PingFang SC;
							font-weight: normal;
							font-size: 24rpx;
							color: #979797;
							margin-top: 18rpx;
						}
					}
				}
				.right{
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>